<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10-CSS3新增伪元素选择器使用场景和由来</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须写的 */
            display: inline-block;
            content: '他';
            width: 30px;
            height: 40px;
            background-color: skyblue;
        }
        div::after {
            content: '吖';
        }
    </style>
</head>
<body>
    <div>
        易烊千玺
    </div>
</body>
</html>
<!-- 
    注意：
    1.before和after创建一个元素，但是属于行内元素
    2.新创建的这个元素在文档中是找不到的，所以我们称为伪元素
    3.语法：element::before{}
    4.before和after必须有content属性
    5.before在父元素内容的前面创建元素，after在父元素内容后面插入元素
    6。伪元素选择器和标签选择器一样，权重为1
 -->